<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Tabs 标签页</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	<script src="../static/js/icons-vue.js"></script>
	<link rel="stylesheet" href="../static/css/com.css">
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">基础的、简洁的标签页。</p>
	<p class="desc">Tabs 组件提供了选项卡功能， 默认选中第一个标签页，你也可以通过 value 属性来指定当前选中的标签页。</p>
	<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
		<el-tab-pane label="User" name="first">User</el-tab-pane>
		<el-tab-pane label="Config" name="second">Config</el-tab-pane>
		<el-tab-pane label="Role" name="third">Role</el-tab-pane>
		<el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
	</el-tabs>
	
	<el-divider content-position="left">卡片风格的标签</el-divider><!-- =============================================================== -->
	<p class="desc">你可以设置具有卡片风格的标签。</p>
	<p class="desc">只需要设置 type 属性为 card 就可以使选项卡改变为标签风格。</p>
	<el-tabs v-model="activeName2" type="card" class="demo-tabs" @tab-click="handleClick">
		<el-tab-pane label="User" name="first">User</el-tab-pane>
		<el-tab-pane label="Config" name="second">Config</el-tab-pane>
		<el-tab-pane label="Role" name="third">Role</el-tab-pane>
		<el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
	</el-tabs>
	
	<el-divider content-position="left">带有边框的卡片风格</el-divider><!-- =============================================================== -->
	<p class="desc">你还可以设置标签页为带有边框的卡片</p>
	<p class="desc">将 type 设置为 border-card。</p>
	<el-tabs v-model="activeName2" type="border-card" class="demo-tabs" @tab-click="handleClick" style="width: 500px;">
		<el-tab-pane label="User" name="first">User</el-tab-pane>
		<el-tab-pane label="Config" name="second">Config</el-tab-pane>
		<el-tab-pane label="Role" name="third">Role</el-tab-pane>
		<el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
	</el-tabs>
	
	<el-divider content-position="left">标签位置的设置</el-divider><!-- =============================================================== -->
	<p class="desc">可以通过 tab-position 设置标签的位置</p>
	<p class="desc">标签一共有四个方向的设置 tabPosition="left|right|top|bottom"</p>
	<el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
		<el-radio-button label="top">top</el-radio-button>
		<el-radio-button label="right">right</el-radio-button>
		<el-radio-button label="bottom">bottom</el-radio-button>
		<el-radio-button label="left">left</el-radio-button>
	</el-radio-group>
	
	<el-tabs :tab-position="tabPosition" style="height: 200px" class="demo-tabs">
		<el-tab-pane label="User">User</el-tab-pane>
		<el-tab-pane label="Config">Config</el-tab-pane>
		<el-tab-pane label="Role">Role</el-tab-pane>
		<el-tab-pane label="Task">Task</el-tab-pane>
	</el-tabs>
	
	<el-divider content-position="left">自定义标签页的内容</el-divider><!-- =============================================================== -->
	<p class="desc">可以通过具名插槽来实现自定义标签页的内容</p>
	<el-tabs type="border-card" class="demo-tabs">
		<el-tab-pane>
			<template #label>
				<span class="custom-tabs-label">
					<el-icon><calendar /></el-icon>
					<span>Route</span>
				</span>
			</template>
			Route
		</el-tab-pane>
		<el-tab-pane label="Config">Config</el-tab-pane>
		<el-tab-pane label="Role">Role</el-tab-pane>
		<el-tab-pane label="Task">Task</el-tab-pane>
	</el-tabs>
	
	<el-divider content-position="left">动态增减标签页</el-divider><!-- =============================================================== -->
	<p class="desc">增减标签页按钮只能在选项卡样式的标签页下使用</p>
	<el-tabs v-model="editableTabsValue" type="card" editable class="demo-tabs" @edit="handleTabsEdit" @tab-click="handleClick">
		<el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
			{{ item.content }}
		</el-tab-pane>
	</el-tabs>
	
	<el-divider content-position="left">自定义增加标签页触发器</el-divider><!-- =============================================================== -->
	<div style="margin-bottom: 20px">
		<el-button size="small" @click="addTab">add tab</el-button>
	</div>
	<el-tabs v-model="editableTabsValue7" type="card" class="demo-tabs" closable @tab-remove="removeTab" @tab-click="handleClick">
		<el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
			{{ item.content }}
		</el-tab-pane>
	</el-tabs>
	
</div>

</body>
<script>
let tabIndex = 2;
let tabIndex7 = 2;
const Main = {
	data() {
		return {
			activeName: 'first',
			activeName2: 'third',
			tabPosition: "left",
			
			editableTabsValue: '2',
			editableTabsValue7: '2',
			editableTabs: [
				{title: 'Tab 1',name: '1',content: 'Tab 1 content',},
				{title: 'Tab 2',name: '2',content: 'Tab 2 content',},
			],
		}
	},
	methods:{
		handleClick(tab, event){
			console.log(tab.props.name);
			console.log(tab, event);
		},
		handleTabsEdit(paneName, action){
			// console.log(paneName, action);
			if (action === 'add') {
				const newTabName = `${++tabIndex}`
				this.editableTabs.push({
					title: 'New Tab' + newTabName,
					name: 'name' + newTabName,
					content: 'New Tab content' + newTabName,
				})
				this.editableTabsValue = "name" + newTabName
			} else if (action === 'remove') {
				const tabs = this.editableTabs
				let activeName6 = this.editableTabsValue
				if (activeName6 === paneName) {
					tabs.forEach((tab, index) => {
						if (tab.name === paneName) {
							const nextTab = tabs[index + 1] || tabs[index - 1]
							if (nextTab) {
								activeName6 = nextTab.name
							}
						}
					})
				}
				this.editableTabsValue = activeName6
				this.editableTabs = tabs.filter((tab) => tab.name !== paneName)
			}
		},
		
		addTab(){
			const newTabName = `${++tabIndex7}`
			this.editableTabs.push({
				title: 'New Tab' + newTabName,
				name: 'name' + newTabName,
				content: 'New Tab content' + newTabName,
			})
			this.editableTabsValue7 = "name" + newTabName
		},
		removeTab(paneName){
			const tabs = this.editableTabs
			let activeName7 = this.editableTabsValue7
			if (activeName7 === paneName) {
				tabs.forEach((tab, index) => {
					if (tab.name === paneName) {
						const nextTab = tabs[index + 1] || tabs[index - 1]
						if (nextTab) {
							activeName7 = nextTab.name
						}
					}
				})
			}
			this.editableTabsValue7 = activeName7
			this.editableTabs = tabs.filter((tab) => tab.name !== paneName)
		}
	}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)}
app.use(ElementPlus);
let vm = app.mount("#app");

</script>
</html>